<template>
  <div class="setting-hours-record" v-loading="loading">
    <!-- start 头部 -->
    <div class="setting-hours-record-header">
      <div class="setting-hours-left">
        <p class="setting-back-btn" @click="back">
          <i class="iconfont icon-arrow-left"></i> {{$t('common.base.back')}}
        </p>
        <p class="setting-back-name">{{cardName}}</p>
      </div>    
      <!-- <base-button
        type="primary"
        native-type="submit"
        :disabled="pending"
        @event="submit"
      >保存</base-button> -->
    </div>
    <!-- end 头部 -->
    
    <!-- start content-->
    <div class="setting-hours-record-content">
      <div class="setting-hours-li">
        <div class="mobile-limit">
          <div class="mobile-msg">
            <p>{{$t('task.tip.taskHoursRecordTip3')}}</p>
            <p>{{$t('task.tip.taskHoursRecordTip4')}}</p>
          </div>
          <el-switch v-model="cardConfig.isOnlyMobile" :active-text="cardConfig.isOnlyMobile?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>    
        </div>
      </div>
      <div class="setting-hours-li">
        <p class="setting-title">{{$t('task.setting.taskAdditionalSetting.taskHoursRecordFieldsSetting')}}</p> 
        <div class="setting-fields">
          <div v-for="(field,index) in fieldsList" :key="index">
            <div class="form-group" v-if="field.formType == 'datetime'">
              <label>{{field.displayName}}</label>
              <el-input :placeholder="$t('common.placeholder.selectSomething', {0: field.displayName})" disabled></el-input>
            </div>
            <div class="form-group" v-else-if="field.formType == 'number'">
              <label>{{field.displayName}}</label>
              <el-input :placeholder="$t('customer.detail.taskCard.fields.usedTime.placeholder')" disabled></el-input>
            </div>
            <div class="form-group" v-else-if="field.formType == 'select'">
              <label>{{field.displayName}}</label>
              <el-input :placeholder="$t('task.tip.taskHoursRecordTip5')" disabled></el-input>
              <p class="set-btn" @click="onSet('dateSet',field)">{{$t('common.base.setting')}}</p>
            </div>
            <div class="form-group" v-else-if="field.formType == 'text'">
              <label>{{field.displayName}}</label>
              <el-input :placeholder="$t('common.placeholder.inputSomething', {data1: field.displayName})" disabled></el-input>
              <p class="set-btn" @click="onSet('noteSet',field)">{{$t('common.base.setting')}}</p>
              <el-switch v-model="field.enabled" :active-text="field.enabled==1?$t('common.base.enable'):$t('common.base.disable')" :active-value="1" :inactive-value="0" @change="onSetChange"></el-switch>    
            </div>
            <div class="form-group" v-else-if="field.formType == 'attachment'">
              <label>{{$t('common.base.attachment')}}</label>
              <el-button type="primary" disabled>{{$t('common.base.clickForUploading')}}</el-button>
              <el-checkbox v-model="cardConfig.onlyPhoto" @change="onSetChange">{{$t('task.tip.taskHoursRecordTip6')}}</el-checkbox>
              <el-switch v-model="field.enabled" :active-text="field.enabled==1?$t('common.base.enable'):$t('common.base.disable')" class="open-attachment" :active-value="1" :inactive-value="0" @change="onSetChange"></el-switch>    
            </div>
          </div>
        </div>
      </div>
      <div class="setting-hours-li">
        <p class="setting-title">{{$t('task.tip.taskHoursRecordTip7')}}</p> 
        <div class="setting-hours-item">
          <p class="setting-hours-title">{{$t('task.detail.components.startTiming')}}</p>
        </div>
        <div class="setting-hours-item">
          <div>
            <p class="setting-hours-title">{{$t('task.detail.components.endTiming')}}</p>
            <el-checkbox v-model="cardConfig.isAutoEndTiming" class="end-status" @change="onSetChange">{{$t('task.tip.taskHoursRecordTip8')}}</el-checkbox>
          </div>
        </div>
        <div class="setting-hours-item">
          <div>
            <p class="setting-hours-title">{{$t('task.setting.taskAdditionalSetting.allowPauseTiming')}}</p>
            <p class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip9')}}</p>
          </div>
          <el-switch v-model="cardConfig.pause" :active-text="cardConfig.pause?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>    
        </div>
        <div class="setting-hours-item">
          <div>
            <p class="setting-hours-title">{{$t('task.setting.taskAdditionalSetting.allowTagMiddlePoint')}}</p>
            <p class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip10')}}</p>
          </div>
          <el-switch v-model="cardConfig.centerPoint" :active-text="cardConfig.centerPoint?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>    
        </div>
      </div>
      <div class="setting-hours-li">
        <p class="setting-title">{{$t('common.base.otherSet')}}</p> 
        <div class="setting-hours-item">
          <div>
            <p class="setting-hours-title">{{$t('task.tip.taskHoursRecordTip11')}}</p>
            <p class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip12')}}</p>
          </div>
          <el-switch v-model="cardConfig.autoLocation" :active-text="cardConfig.autoLocation?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>    
        </div>
        <div class="setting-hours-item" v-if="cardConfig.autoLocation">
          <div>
            <p class="setting-hours-title">{{$t('task.setting.taskAdditionalSetting.positionExceptionRemind')}}</p>
            <div class="setting-hours-box">
              <div class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip13')}}</div>
              <el-input v-model="cardConfig.notifyDistanceRange" @change="handleInputChange" class="item-input-num" size="mini"></el-input>
              <div class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip14')}}</div>
            </div>
            <div class="setting-select-box" v-if="cardConfig.notifyPositionState">
              <!-- TODO 国际化待办 -->
              <el-select v-model="notifyPositionNode" clearable :placeholder="$t('common.placeholder.select')" multiple @change="handleTimingModeChange">
                <el-option :label="$t('task.detail.components.startTiming')" value="开始计时"></el-option>
                <el-option :label="$t('task.detail.components.endTiming')" value="结束计时"></el-option>
                <el-option :label="$t('task.setting.taskAdditionalSetting.tagMiddlePoint')" value="标记中间点"></el-option>
              </el-select>
            </div>
          </div>
          <el-switch v-model="cardConfig.notifyPositionState" :active-text="cardConfig.notifyPositionState?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>      
        </div>
        <div class="setting-hours-item">
          <div>
            <p class="setting-hours-title">{{$t('task.tip.taskHoursRecordTip15')}}</p>
            <p class="setting-hours-msg">{{$t('task.tip.taskHoursRecordTip16')}}</p>
          </div>
          <el-switch v-model="cardConfig.distanceStatis" :active-text="cardConfig.distanceStatis?$t('common.base.enable'):$t('common.base.disable')" @change="onSetChange"></el-switch>    
        </div>
        <div class="setting-hours-item">
          <div class="setting-hours-box">
            <p class="setting-hours-title">{{$t('task.tip.taskHoursRecordTip17')}}</p>
            <el-input v-model="cardConfig.maxTime" type="number" maxlength="50" @blur="onSetChange"></el-input>
            <p class="setting-hours-title">{{$t('task.tip.taskHoursRecordTip18')}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end content-->

    <!--start 用时类别设置弹窗 -->
    <date-set-dialog ref="dateSetDialog" @onSave="(value)=>onSaveSetSubmit(value,'dateSet')"></date-set-dialog>
    <!--end 用时类别设置弹窗 -->

    <!--start 备注设置弹窗 -->
    <note-set-dialog ref="noteSetDialog" @onSave="(value)=>onSaveSetSubmit(value,'noteSet')"></note-set-dialog>
    <!--end 备注设置弹窗 -->
  </div>
</template>

<script>
import TaskHoursRecordView from './TaskHoursRecordView';
export default TaskHoursRecordView;
</script>

<style lang="scss">
@import "./TaskHoursRecordView.scss";
</style>
<style lang="scss" scoped>
.setting-hours-record{
  .setting-fields label{
    display: inline-block!important;
  }
}
</style>